<!--
 * @Author: wangzm
 * @Date: 2020-01-07 09:30:51
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-09 20:09:15
 * @Description: 基础nav
 -->
<template>
  <view class="base-nav">
    <view v-if="navHolder" class="nav-holder" :style="'height:' + ( navPosition === 'fixed' ? statusBarHeight : statusBarHeight+44) + 'px;padding-bottom:'+otherHeight">
      <view v-if="refreshFlag" class="text">刷新中...</view>
    </view>
    <view class="nav-bar" :style="'background: ' + background + backgroundPosition +'padding-top: '+(statusBarHeight)+'px;z-index:' +zIndex+';top:'+top">
      <view class="nav-container">
        <view class="left-part" :style="{paddingBottom: navPaddingBottom+'px'}" @click="handleLeftClick"><!-- 导航栏左边 -->
          <slot name="left">
            <image v-if="leftIcon === 'back'" class="nav-icon click-active" :src="`/static/images/icon/${leftIconPic}.png`" mode="aspectFit" />
            <image v-else-if="leftIcon === 'home'" class="nav-icon click-active" src="/static/images/icon/icon_nav_home.png" mode="aspectFit" />
          </slot>
        </view>
        <view class="title-part" :style="{paddingBottom: navPaddingBottom+'px'}"><!-- 导航栏中间 -->
          <slot name="title">
            <view v-if="title" class="nav-title" :style="'color: '+titleColor">{{ title }}</view>
          </slot>
        </view>
        <view class="right-part click-active" :style="{paddingBottom: navPaddingBottom+'px'}" @click="handleRightClick">
          <slot name="right"></slot>
        </view>
      </view>
      <slot name="other"></slot>
    </view>
  </view>
</template>
<script>
export default {
  name: 'BaseNav',
  props: {
    navHolder: {
      type: Boolean,
      default: true
    },
    navPosition: {
      type: String,
      default: 'relative'
    },
    refreshFlag: {
      type: Boolean,
      default: false
    },
    otherHeight: { // 有slot=other时，需把高度传进来
      type: String,
      default: '0rpx'
    },
    background: {
      type: String,
      default: '#FFF'
    },
    backgroundPosition: {
      type: String,
      default: ' bottom center;'
    },
    leftIcon: {
      type: String,
      default: '' // back: 回退按钮， home: 返回首页按钮
    },
    leftIconPic: {
      type: String,
      default: 'icon_return'
    },
    leftClick: {
      type: [Function, null], // 点击左侧按钮回调
      default: null
    },
    rightClick: {
      type: [Function, null], // 点击右侧按钮回调
      default: null
    },
    title: {
      type: String, // 标题
      default: ''
    },
    titleColor: {
      type: String, // 标题颜色
      default: '#333'
    },
    zIndex: {
      type: Number,
      default: 99
    },
    top: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      statusBarHeight: 20, // 状态栏高度
      navPaddingBottom: 0 // 导航位置校正
    }
  },
  created() {
    uni.getSystemInfo({
      success: ({ statusBarHeight }) => {
        this.statusBarHeight = statusBarHeight
        // #ifdef MP-WEIXIN
        const menuButton = uni.getMenuButtonBoundingClientRect()
        this.navPaddingBottom = 12 - (menuButton.top - this.statusBarHeight) * 2
        // #endif
      }
    })
  },
  methods: {
    handleLeftClick() {
      if (this.leftClick) {
        this.leftClick()
      } else if (this.leftIcon === 'back') {
        uni.navigateBack()
      } else if (this.leftIcon === 'home') {
        this.$navigateTo('/pages/home/index', {}, 'reLaunch')
      }
    },
    handleRightClick() {
      if (this.rightClick) {
        this.rightClick()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.base-nav{
  position: relative;
  .nav-holder{
    position: relative;
    box-sizing: content-box;
    background: transparent;
    .text{
      text-align: center;
      left: 0;
      right: 0;
      bottom: 24rpx;
      position: absolute;
    }
  }
  .nav-bar{
    background-size: 100% auto !important;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99;

    .nav-container{
      height: 44px;
      position: relative;

      .left-part{
        @include flex;
        @include a-center;
        top: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        box-sizing: border-box;

        .nav-icon{
          width: 40rpx;
          height: 100%;
          margin: 0 30rpx;
        }
      }
      .title-part{
        height: 100%;
        box-sizing: border-box;

        .nav-title{
          @include flex;
          @include center;
          @include text-ellipsis;
          width: 100%;
          height: 100%;
          line-height: 200%;
          color: #000;
          font-size: 18px;
          font-weight: 500;
          width: 100%;
          padding: 0 160rpx;
          box-sizing: border-box;
        }
      }
      .right-part{
        @include flex;
        @include a-center;

        top: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        box-sizing: border-box;
      }
    }
  }
}
</style>
